<template>
  <div style="margin-left: 10px; margin-top: 10px">
    <el-table
      v-loading="isLoading"
      :data="currentPageData"
      style="width: 100%"
    >
      <el-table-column
        prop="ticketName"
        label="门票名称"
      />
      <el-table-column
        prop="sceneryName"
        label="景区名称"
      />
      <el-table-column
        prop="price"
        label="价格"
      >
        <template slot-scope="scope">
          {{ scope.row.price }}元
        </template>
      </el-table-column>
      <el-table-column
        prop="inventoryNum"
        label="剩余库存"
      >
        <template slot-scope="scope">
          {{ scope.row.inventoryNum }}张
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size=pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total=list.length>
    </el-pagination>
  </div>
</template>

<script>
import { getAllTickets } from '@/api/ticket'
export default {
  name: "Ticket",
  data() {
    return {
      isLoading: false,
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 10, // 每页显示数量
      list: [],
      currentPageData: [], //当前页显示内容
    }
  },
  created() {
    this.getAllTickets()
  },
  methods: {
    async getAllTickets() {
      this.isLoading = true
      var response = await getAllTickets();
      this.list = response.data
      this.initPage()
      this.isLoading = false
    },
    initPage() {
      this.totalPage=Math.ceil(this.list.length / this.pageSize);
      this.totalPage = this.totalPage === 0 ? 1 : this.totalPage;
      this.getCurrentPageData();
    },
    getCurrentPageData() {
      if (this.pageSize >= this.list.length) {
        this.currentPageData = this.list
        return
      }
      let begin = (this.currentPage - 1) * this.pageSize;
      let end = this.currentPage * this.pageSize;
      this.currentPageData = this.list.slice(
        begin,
        end
      );
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.getCurrentPageData();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getCurrentPageData()
    }
  }
}
</script>

<style scoped>

</style>
